<template>
  <div>
    <ylheader :leftsvg="true" :title="'我的投稿'"></ylheader>
    <div class="loadmore-container" ref="mySubmissionWrapper">
      <div class="shuoshuo-new" v-if="listnodata">
        <span class="yl-2kong nosvg">
          <span class="path1">
            <span class="path2">
              <span class="path3">
                <span class="path4">
                  <span class="path5">
                    <span class="path6">
                      <span class="path7">
                        <span class="path8">
                          <span class="path9"></span>
                        </span>
                      </span>
                    </span>
                  </span>
                </span>
              </span>
            </span>
          </span>
        </span>
        <span class="no-text">还没有相关内容哦，快去投稿话题吧！</span>
      </div>
      <div
        class="my_submission v-c"
        @click="goSubmissionDetail(item.id)"
        v-for="(item,index) in list"
        :key="index"
        v-else
      >
        <div class="submission_content">
          <p class="content two-line">{{item.title}}</p>
          <p class="time">{{item.createTimestamp}}</p>
        </div>
        <div class="submission_status a-c pending_review" :class="[{'passed':item.auditType==1},{'not_passed':item.auditType==2}]">
          <span>{{item.auditType==0?"待审核":item.auditType==1?"已通过":item.auditType==2?"未通过":""}}</span>
        </div>
      </div>
    </div>
    <div class="submission-topic" @click="$router.push({path:'submission'})" v-if="pictureUrl"><img :src="pictureUrl" alt=""></div>
  </div>
</template>

<script>
import ylheader from "src/components/yl-header.vue";
import api from "src/api/index";
export default {
  name: "mysubmission",

  components: { ylheader, api },

  props: {},

  data() {
    return {
      page: 1,
      is_r: false,
      listnodata: false,
      list: [],
      totalPage: 0,
      pictureUrl:""//投稿入口图片
    };
  },
  created() {
    this.myArticlesList().then(res=>{
      this.initScroll()
    }).then(data => {
        this.queryArticlesEnter();
        this.$nextTick(() => {
          setTimeout(() => {
            this.myscroll.refresh();
          }, 1000);
        });
         let loadmore = document.getElementsByClassName("loadmore-container");
        if ("mySubmission2detail" == localStorage.turnCount) {
          if (loadmore.length > 0) {
            setTimeout(() => {
              this.myscroll.refresh();
              loadmore[0].style.transform = localStorage.turnBackmySubmission;
            }, 0);
          }
          localStorage.turnCount = "";
        }
    })
  },
  methods: {
    myArticlesList() {
      let p = new Promise((resolve, reject) => {
        if ("mySubmission2detail" == localStorage.turnCount) {
          let mySubmissionObj = JSON.parse(localStorage.mySubmissionStorage);
          this.list = mySubmissionObj.list;
          this.page = mySubmissionObj.page;
          this.totalPage = mySubmissionObj.totalPage;
          if (this.page < this.totalPage) {
            this.is_r = false;
          }
          resolve(true);
        } else {
          api.myArticlesList({page:this.page,limit:10}).then(res => {
            if (res.code == 0) {
              this.totalPage = res.page.totalPage;
              this.list = this.is_r
                ? [...this.list, ...res.page.list]
                : res.page.list;
              if (this.page < res.page.totalPage) {
                this.is_r = false;
              }
              if (this.list.length == 0) {
                this.listnodata = true;
              } else {
                this.listnodata = false;
              }
              if (this.myscroll) {
                this.$nextTick(() => {
                  this.myscroll.refresh();
                });
              }
              let mySubmissionObj = JSON.stringify({
                list: this.list,
                page: this.page,
                totalPage: this.totalPage
              });
              localStorage.mySubmissionStorage = mySubmissionObj;
            } else {
              this.$toast(res.msg);
            }
            resolve("获取投稿列表....");
          });
        }
      });
      return p
    },
    initScroll() {
      let p = new Promise((resolve, reject) => {
        let mySubmissionWrapper = this.$refs.mySubmissionWrapper;
        localStorage.tempPageHeight = document.getElementsByClassName(
          "loadmore-container"
        )[0].scrollHeight;
        let _this = this;
        this.$nextTick(() => {
          _this.myscroll = new iScroll(mySubmissionWrapper, {
            preventDefault: false,
            onScrollMove: function() {
              if (
                this.y <= this.wrapperH - this.scroller.clientHeight - 50 &&
                _this.is_r == false
              ) {
                _this.is_r = true;
                if (_this.page < _this.totalPage) {
                  _this.page++;
                  _this.myArticlesList();
                }
              }
            },
            onScrollEnd: function() {},
            onScrollStart: function() {
              if (
                localStorage.tempPageHeight !=
                document.getElementsByClassName("loadmore-container")[0].scrollHeight
              ) {
                this.refresh();
                localStorage.tempPageHeight = document.getElementsByClassName(
                  "loadmore-container"
                )[0].scrollHeight;
              }
            }
          });
          resolve("初始化scroll");
        });
      });
      return p;
    },
    goSubmissionDetail(id) {
      localStorage.turnCount = "mySubmission2detail";
      this.$util.getTransformState("turnBackmySubmission");
      this.$router.push({name:'activityrule',query:{tag:9,articlesId:id}})
    },
    queryArticlesEnter(){
      api.queryArticlesEnter().then(res=>{
        if(res.code==0){
          if(res.data){
            this.pictureUrl = res.data.pictureUrl
          }
        }else{
          this.$toast(res.msg)
        }
      })
    }
  }
};
</script>

<style lang="less" scoped>
.my_submission {
  margin: 0.3rem 0.3rem 0;
  padding: 0 0.3rem;
  background: #fff;
  border-radius: 0.15rem;
  justify-content: space-between;
  height: 1.7rem;
  box-shadow: 0px 0px 0.14rem 0.06rem rgba(0, 0, 0, 0.08);
  .submission_content {
    .content {
      font-size: 0.3rem;
      color: #333333;
      margin-bottom: 0.15rem;
      line-height: 1.2;
    }
    .time {
      color: #9a9a9a;
      font-size: 0.22rem;
    }
  }
  .submission_status {
    border-radius: 3px;
    font-size: 0.26rem;
    min-width: 1.05rem;
    margin-left: 0.2rem;
    span {
      padding: 2px 5px;
    }
  }
  .pending_review {
    background: #eaf6ff;
    color: #46a9f8;
  }
  .passed {
    background: rgba(242, 251, 248, 1);
    color: #3ec8c0;
  }
  .not_passed {
    background: rgba(255, 242, 245, 1);
    color: #fb685b;
  }
}
</style>

